<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业皮肤</title>
		<style>
			body {
				background: url(1.jpg) no-repeat;
			}
			.box {
				height: 180px;
				padding: 0 10px;
				text-align: center;
				background: rgba(255, 255, 255, 0.3);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="1.jpg" alt="" width="200px"/>
       	 	<img src="2.jpg" alt="" width="200px"/>
       	 	<img src="3.jpg" alt="" width="200px"/>
       		<img src="4.jpg" alt="" width="200px"/>
       	 	<img src="5.jpg" alt="" width="200px"/>
		</div>
		
		<script>
			var body = document.getElementsByTagName("body")[0];
			var imgChange = document.getElementsByTagName("img");
			
			for(var i = 0; i < imgChange.length; i++) {
				imgChange[i].onclick = function() {
					body.style.backgroundImage = "url("+this.src+")";
				}
			}
		</script>
	</body>
</html>
